<!-- 添加采购计划 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加采购计划</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_nkr942sxu7.css" />
    <link rel="stylesheet" href="../css/reset.css?3123" />
    <link rel="stylesheet" href="../css/setlayui.css?12" />
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none" v-show="showApp">
        <div class="content_box">
            <div class="cell_box" style="width: 39.71vw">
                <div class="cell_title">
                    <div class="cell_txt">基本信息:</div>
                </div>
                <div class="cell_cont">
                    <div class="cell_item" style="margin: 20px 0">
                        <div class="cell_name must_input">计划标题</div>
                        <div class="cell_input">
                            <el-tooltip class="item" effect="dark" :disabled="!baseInfo.title" :content="baseInfo.title"
                                placement="top">
                                <el-input placeholder="请输入内容" v-model="baseInfo.title" clearable> </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="cell_item">
                        <div class="cell_name">备注</div>
                        <div class="cell_input">
                            <el-tooltip class="item" effect="dark" :disabled="!baseInfo.remark"
                                :content="baseInfo.remark" placement="top">
                                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="baseInfo.remark">
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>

                </div>
            </div>
            <div class="cell_box" style="width: 50vw; float: right">
                <div class="cell_title">
                    <div class="cell_txt">附件:</div>
                    <div class="cell_but">
                        <el-upload class="upload-demo" action="##" :show-file-list="false" :http-request="httprequest"
                            multiple>
                            <el-button type="primary">上传附件</el-button>
                        </el-upload>
                    </div>
                </div>
                <div class="cell_cont">
                    <el-table :data="fileList" height="100%" border style="width: 100%;">
                        <el-table-column prop="filename" align="center" show-overflow-tooltip label="名称">
                        </el-table-column>
                        <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人"
                            min-width="80"></el-table-column>
                        <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间"
                            width="144"></el-table-column>
                        <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="146">
                            <template slot-scope="scope">
                                <el-button @click="prevew(scope.row)" type="text">查看</el-button>
                                <el-button @click="downFile(scope.row)" type="text">下载</el-button>
                                <el-button @click="remove(scope.row)" type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="cell_box last_cell">
                <div class="cell_title">
                    <div class="cell_txt">设备明细:</div>
                    <div class="cell_but">
                        <el-button class="cancelClass" @click="sbAdd" type="primary">新增</el-button>
                    </div>
                </div>
                <div class="cell_cont">
                    <el-table :data="sbmxList" max-height="400px" border style="width: 100%">
                        <el-table-column prop="DeviceName" align="center" show-overflow-tooltip label="设备名称">
                        </el-table-column>

                        <el-table-column prop="DeviceModel" align="center" show-overflow-tooltip label="规格型号">
                        </el-table-column>
                        <el-table-column prop="DeviceUnit" align="center" show-overflow-tooltip label="单位" width="70">
                        </el-table-column>
                        <el-table-column prop="InventoryQuantity" align="center" show-overflow-tooltip label="账存数量">
                        </el-table-column>

                        <el-table-column prop="name" align="center" show-overflow-tooltip label="计划采购量" width="152">
                            <template slot-scope="scope">
                                <div class="table_nums">
                                    <el-input-number v-model="scope.row.PurchaseQuantity" type="number" :min="1"
                                        label="描述文字"></el-input-number>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="70">
                            <template slot-scope="scope">
                                <el-button @click="clmxRemove(scope.row)" type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
        <div class="but_box">
            <el-switch style="margin-right: 10px;" v-model="radio" active-color="#5574d7" inactive-color="#666">
            </el-switch>
            同时发起采购订单
            <el-button style="margin-left: 10px;" @click="cancel" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
        <div class="hidden_box">
            <input id="clmxDataValue" value="" type="text">
        </div>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    baseUrl: '',
                    // baseUrl: 'http://47.114.160.61:8050',
                    showApp: false,
                    previewList: [],
                    projectId: '',
                    baseInfo: {
                        title: '',
                        remark: ''
                    },
                    uploadFile: '',
                    fileList: [],
                    sbmxList: [],
                    radio: false,
                    PurchaseOrderRecid: ""
                };
            },
            methods: {
                clmxRemove(row) {
                    var that = this
                    this.$confirm('此操作将删除此条数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        for (var i = 0; i < that.sbmxList.length; i++) {
                            if (row.DeviceId == that.sbmxList[i].DeviceId) {
                                that.sbmxList.splice(i, 1)
                            }
                        }
                    }).catch(function () {
                    });
                },
                // 取消
                cancel() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                // 提交 提交添加采购计划请求
                confirms() {
                    var that = this
                    var baseInfo = this.baseInfo
                    var fileList = this.fileList
                    var sbmxList = this.sbmxList
                    var fileArr = []
                    for (var i = 0; i < fileList.length; i++) {
                        fileArr.push(fileList[i].fileid + ',' + fileList[i].filename + ',' + fileList[i].userName + ',' + fileList[i].uploadTime)
                    }
                    if (baseInfo.title.length == 0) {
                        this.$message({
                            message: '请输入计划标题',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (sbmxList.length == 0) {
                        this.$message({
                            message: '请至少添加一条设备明细',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    // 如果点击同时发起采购计划
                    // 同时发起采购订单
                    if (this.radio && !this.PurchaseOrderRecid) {
                        that.creatOrder(baseInfo.title)
                        return false
                    }

                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        url: this.baseUrl + '/WebProxy/Proxy?url=DevicePurchasePlan/AddPlan',
                        data:
                        {
                            param: JSON.stringify({
                                Title: baseInfo.title,
                                Remark: baseInfo.remark,
                                PlanDetail: sbmxList,
                                UploadFile: fileArr.join('|'),
                                PurchaseOrderRecid: that.PurchaseOrderRecid
                            }),
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.Code != 0) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: res.Msg ? res.Msg : '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 100)
                        }
                    });
                },
                // 打开采购计划窗口 recid为采购计划id
                creatOrder(title) {
                    var that = this
                    var list = []
                    for (var i = 0; i < that.sbmxList.length; i++) {
                        list.push({
                            Id: that.sbmxList[i].DeviceId,
                        })
                    }
                    var data = {
                        title: title,
                        list: list
                    }
                    // 用于接受子页面传递过来的值
                    parent.$('#publicValue').val('')
                    // 同时发起采购订单
                    parent.layer.open({
                        type: 2,
                        title: '同时生成订单',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['91.4%', '89.81%'],
                        content: 'tscreatorder.html?publicData=' + encodeURIComponent(JSON.stringify(data)) + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {

                                if (parent.$('#publicValue').val()) {
                                    var data = JSON.parse(parent.$('#publicValue').val());
                                    var id = data.recid;
                                    that.PurchaseOrderRecid = id;
                                    if (that.PurchaseOrderRecid) {
                                        that.confirms();
                                    }
                                }
                            }, 100)


                            // 完成同步订单之后需要关闭  关闭同步订单的则不需要关闭 而是发起删除订单请求
                            // 关闭的时候
                        }
                    });
                },
                // 发起同步订单关闭 发起请求将当前废弃的订单删除 保留当前窗口
                deleteCurOrder(recid) {
                    var that = this;
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/DeleteConstructionPlan',
                        data: JSON.stringify({
                            id: recid
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                        }
                    });
                },
                // 预览
                prevew(row) {
                    if (getFileType(row.filename) == 'IMG') {
                        this.previewList = [row.fileurl];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                        return false
                    }
                    if (getFileType(row.filename) == 'PDF') {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                            content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(row.fileurl),
                            end: function () { }
                        });
                        return false
                    }
                    publicdownFile(row.filename, row.fileurl)
                },
                downFile(row) {
                    publicdownFile(row.filename, row.fileurl)
                },
                remove(row) {
                    var that = this
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        for (var i = 0; i < that.fileList.length; i++) {
                            if (row.fileid == that.fileList[i].fileid) {
                                that.fileList.splice(i, 1)
                            }
                        }
                    }).catch(function () {
                    });
                },
                // 文件上传
                httprequest(file) {
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            that.fileList.push({
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            })
                        }
                    });
                },
                // 设备新增
                sbAdd() {
                    var that = this
                    var selectArr = []
                    for (var i = 0; i < this.sbmxList.length; i++) {
                        selectArr.push({
                            Id: this.sbmxList[i].DeviceId,
                        })
                    }
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择设备和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                        content: '/ApsPublic/publicList/sbmxList.html?projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val());
                                    var jsonList = [];
                                    for (var i = 0; i < newList.length; i++) {
                                        jsonList.push({
                                            DeviceId: newList[i].Id,
                                            DeviceName: newList[i].Name,
                                            DeviceModel: newList[i].Model,
                                            DeviceUnit: newList[i].Unit,
                                            InventoryQuantity: newList[i].FreeCount + newList[i].InUseCount,
                                            PurchaseQuantity: 1
                                        })
                                    }
                                    that.sbmxList = that.sbmxList.concat(jsonList)
                                }
                            }, 10)
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
            }
        });
    </script>
</body>
<style>
    .but_box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

    .but_box .el-button {
        width: 120px;
        height: 32px;
        background: #5574d7;
        border-radius: 5px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .but_box .el-button--primary:focus,
    .but_box .el-button--primary:hover {
        background: rgba(85, 116, 215, 0.6);
        border-color: rgba(85, 116, 215, 0.6);
        color: #fff;
    }

    .but_box .el-button--primary.is-active,
    .but_box .el-button--primary:active {
        background: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        color: #fff;
    }

    .but_box .cancelClass {
        background: transparent;
        border: 1px solid #bbbbc5;
        color: #333333;
    }

    .but_box .cancelClass:focus,
    .but_box .cancelClass:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .but_box .cancelClass:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .cell_but {
        padding-left: 10px;
    }

    .cell_but .el-button {
        padding: 0 16px;
        height: 32px;
        background: transparent;
        border: 1px solid #5574d7;
        display: flex;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        color: #5574d7;
    }

    .cell_but .el-button:focus,
    .cell_but .el-button:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .cell_but .el-button:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .content_box {
        height: calc(100% - 70px);
        position: relative;
        width: 100%;
        padding: 3.09vh 3.67vw 0;
        overflow: auto;
    }

    .cell_box {
        width: 100%;
        float: left;
    }

    .cell_title {
        height: 42px;
        display: flex;
        align-items: center;
        padding-bottom: 10px;
    }

    .cell_cont {
        height: 250px;
        border: 1px solid #ebebeb;
        padding: 3.09vh 3.67vw;
    }

    .last_cell {
        padding-top: 3.09vh;
        padding-bottom: 3.09vh;
        /* height: calc(100% - 292px); */
    }

    .last_cell .cell_cont {
        height: auto;
        width: 100%;
    }

    .cell_item {
        display: flex;
    }

    .cell_name {
        width: 76px;
        text-align: right;
        line-height: 32px;
        padding-right: 10px;
    }

    .el-input__inner {
        height: 32px;
        border-radius: 5px;
        line-height: 32px;
    }

    .el-input__prefix,
    .el-input__suffix {
        line-height: 32px;
    }

    .cell_input .el-input__icon {
        line-height: 32px;
    }

    .cell_input {
        width: calc(100% - 76px);
    }

    .el-input.is-disabled .el-input__inner {
        background: #e3e3e3;
        border: 1px solid #bbbbc5;
    }

    .el-table th.gutter {
        display: table-cell !important;
    }

    .el-table th {
        background: #f8f8f8;
    }

    .el-table td,
    .el-table th {
        color: #333333;
        padding: 0;
        height: 32px;
    }

    .el-tooltip__popper.is-dark {
        background: #ffffff;
        color: #333333;
        box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
    }

    .el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
        border-top-color: #ffffff;
    }

    .el-tooltip__popper[x-placement^='top'] .popper__arrow {
        border-top-color: #ffffff;
    }

    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #e2e2e2;
    }

    .el-table--border,
    .el-table--group {
        border-color: #e2e2e2;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #e2e2e2;
    }

    .el-table--border th,
    .el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #e2e2e2;
    }

    .el-table--border td,
    .el-table--border th {
        border-right: 1px solid #e2e2e2;
    }

    .el-button--text {
        color: #5574D7;
    }

    .table_input .el-input__inner {
        height: 24px;
        text-align: center;
        border: none;
        line-height: 24px;
    }

    .table_input .el-input__prefix,
    .table_input .el-input__suffix {
        line-height: 24px;
    }

    .table_input .el-input__icon {
        line-height: 24px;
    }

    .table_nums .el-input-number {
        width: 100%;
        height: 24px;
        line-height: 24px;
    }

    .table_nums .el-input-number__decrease,
    .table_nums .el-input-number__increase {
        height: 22px;
        width: 24px;
        background: #fff;
    }

    .table_nums .el-input__inner {
        height: 24px;
        text-align: center;
        line-height: 24px;
        padding: 0 24px;
    }
</style>

</html>